<script setup>
import { ref } from 'vue'
import { Avatar, Lock, Download } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { fetchCommonStyle } from '@/api/common.services'
import { fetchLogin } from '@/api/login.services'
const router = useRouter()
const titleName = ref(localStorage.getItem('titleName'))
const logo = ref(localStorage.getItem('logo'))
const bg_image = ref(localStorage.getItem('bg_image'))
const version = ref(localStorage.getItem('version'))
const style = ref({})
//获取平台名称
const homestyle = async () => {
    const result = await fetchCommonStyle()
    if (result.code == 1) {
        style.value = result.data
        titleName.value = result.data.name
        logo.value = result.data.logo
        bg_image.value = result.data.background_img
        version.value = result.data.version
        localStorage.setItem('titleName', result.data.name)
        localStorage.setItem('logo', result.data.logo)
        localStorage.setItem('bg_image', result.data.background_img)
        localStorage.setItem('version', result.data.version)
        window.document.title = result.data.name
    }
}
//表单数据

const loginForm = ref({})
const login = async () => {
    if (!loginForm.value.username) {
        ElMessage.error('请输入登录账号')
        return
    }
    if (!loginForm.value.password) {
        ElMessage.error('请输入登录密码')
        return
    }
    const result = await fetchLogin(loginForm.value)
    if (result.code == 1) {
        ElMessage.success({
            message: '登录成功',
            duration: 2000
        })
        localStorage.setItem('token', result.data.token)
        localStorage.setItem('uid', result.data.user.id)
        localStorage.setItem('user', JSON.stringify(result.data.user))
        localStorage.setItem('menu', JSON.stringify(result.data.menu))
        localStorage.setItem('currentIndex', 0)
        localStorage.setItem('serverIp', result.data.serverIp)
        localStorage.setItem('serverPort', result.data.serverPort)
        setTimeout(() => {
            router.push({ path: result.data.menu[0].url })
        }, 2000)
    }
}
homestyle()
</script>
<template>
    <div :class="$style['login-container']">
        <img :class="$style['background-fixed']" :src="bg_image" alt />
        <div :class="$style['logo-container']">
            <img :src="logo" alt />
            <span>{{ style.name }}</span>
        </div>
        <div :class="$style['form-container']">
            <div :class="$style['title-wrapper']">{{ style.name }}</div>
            <el-form v-model="loginForm" :class="$style['form-wrapper']">
                <el-input v-model="loginForm.username" size="large" placeholder="请输入登录账号" spellcheck="false"
                    :prefix-icon="Avatar" />
                <el-input v-model="loginForm.password" type="password" size="large" spellcheck="false"
                    placeholder="请输入登录密码" :prefix-icon="Lock" @keyup.enter="login" :show-password="true" />
                <el-button color="#2F7DF1" type="primary" @click="login">登&nbsp;录</el-button>
            </el-form>
        </div>
    </div>
</template>
<style lang="scss" module>
.login-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.background-fixed {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

.logo-container {
    position: fixed;
    left: 120px;
    top: 50px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;

    >img {
        width: 70px;
        height: 70px;
    }

    > :nth-child(2) {
        margin-left: 10px;
        font-size: 20px;
        font-weight: bold;
    }
}

.form-container {
    position: fixed;
    width: 410px;
    z-index: 999;
    top: 50%;
    transform: translateY(-50%);
    right: 15%;
    background: #fff;
    border-radius: 20px;
    padding-bottom: 20px;
    box-shadow: var(--el-box-shadow-light);
}

.title-wrapper {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
}

.form-wrapper {
    padding: 0 20px;
    box-sizing: border-box;

    & button {
        width: 100%;
        height: 40px;
        font-size: 18px;
        font-weight: bold;
    }

    & [class~='el-input'] {
        margin-bottom: 20px;
    }
}
</style>
